<%--
  Created by IntelliJ IDEA.
  User: 1daon
  Date: 2019/1/18
  Time: 9:43 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html class="dialog-page">
<head>
    <jsp:include page="../common/backend_head.jsp"/>
    <style type="text/css">
        #pic {
            position: absolute;
            display: none;
        }

        #pic1 {
            max-width: 150px;
            max-height: 150px;
            border-radius: 5px;
            -webkit-box-shadow: 5px 5px 5px 5px hsla(0, 0%, 5%, 1.00);
            box-shadow: 5px 5px 5px 0px hsla(0, 0%, 5%, 0.3);
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <table class="layui-table detail-table">
        <tr>
            <td>真实姓名</td>
            <td>${sysUserDto.sysUser.userTrueName}</td>
        </tr>
        <tr>
            <td>部门名称</td>
            <td>${sysUserDto.sysDept.deptName}</td>
        </tr>
        <tr>
            <td>角色</td>
            <td>${sysUserDto.sysRole.roleName}</td>
        </tr>
        <tr>
            <td>职务</td>
            <td>${sysUserDto.sysPost.postName}</td>
        </tr>
        <tr>
            <td>性别</td>
            <td>${sysUserDto.sysUser.userSex == 1?"男":"女"}</td>
        </tr>
        <tr>
            <td>昵称</td>
            <td>${sysUserDto.sysUser.userNickname}</td>
        </tr>
        <tr>
            <td>身份证号</td>
            <td>${sysUserDto.sysUser.userIdCard}</td>
        </tr>
        <tr>
            <td>生日</td>
            <td>${sysUserDto.sysUser.userBirthday}</td>
        </tr>
        <tr>
            <td>头像</td>
            <td><img class="avatar-img" onerror="src='/images/common/avatar.png'" src="${sysUserDto.sysUser.userAvatar}" alt="头像"></td>
        </tr>
        <tr>
            <td>邮箱</td>
            <td>${sysUserDto.sysUser.userEmail}</td>
        </tr>
        <tr>
            <td>手机号</td>
            <c:if test="${empty sysUserDto.sysUser.userMobile}"><td></td></c:if>
            <c:if test="${not empty sysUserDto.sysUser.userMobile}">
                <td>${fn:substring(sysUserDto.sysUser.userMobile, 0, 3)}****${fn:substring(sysUserDto.sysUser.userMobile, 7, 11)} <a href="javascript:void(0);" data-val="${sysUserDto.sysUser.userMobile}" class="mobile-show">查看</a></td>
            </c:if>
        </tr>
        <tr>
            <td>最后登录ip</td>
            <td>${sysUserDto.sysUser.userLastLoginIp}</td>
        </tr>
        <tr>
            <td>创建时间</td>
            <td><fmt:formatDate type="both"
                                dateStyle="medium" timeStyle="medium"
                                value="${sysUserDto.sysUser.createdAt}" /></td>
        </tr>
        <tr>
            <td>修改时间</td>
            <td><fmt:formatDate type="both"
                                dateStyle="medium" timeStyle="medium"
                                value="${sysUserDto.sysUser.updatedAt}" /></td>
    </table>
    <div class="layui-button-footer">
        <a href="javascript:void(0);" class="layui-btn layui-btn-danger close-btn"><i class="iconfont icon-round_close_light"></i>关闭</a>
    </div>
</div>
</body>
<jsp:include page="../common/backend_script.jsp"/>
<script type="text/javascript">
    $('.mobile-show').click(function(event) {
        var mobile = $(this).data('val');
        if (mobile == '') {
            mobile = '无手机号';
        }
        $(this).parent().html(mobile);
    });
    $(".layui-table img").hover(function() {
        $('body').append("<p id='pic'><img src='" + this.src + "' id='pic1'></p>");
        $(".layui-table img").mousemove(function(e) {
            $("#pic").css({
                "top": (e.pageY + 10) + "px",
                "left": (e.pageX + 20) + "px"
            }).fadeIn("fast");
        });
    }, function() {
        $("#pic").remove();
    });
</script>
</html>
